<template>
  <header class="header-box">
    <h1>图书管理后台</h1>
    <div>
      <img src="../assets/img/tx.png" alt="">
      <a-dropdown>
        <div>
          <span>{{ username }}</span>
          <DownOutlined style="font-size: 12px;margin-left: 8px;"/>
        </div>
        <template #overlay>
          <a-menu>
            <a-menu-item v-for="item in selectData" :key="item.key" @click="authClick">
              {{ item.title }}
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
    </div>
  </header>
</template>

<script setup lang="ts">
import {
  DownOutlined
} from '@ant-design/icons-vue';
import {useInfoStore} from "@/stores/userInfo";
import {onMounted, ref} from "vue";
import {info} from "@/api/api";
import {message} from "ant-design-vue";
import Cookies from "js-cookie";
import {useRouter} from "vue-router";
// info保存
const {setInfo} = useInfoStore();
// 用戶name
const username = ref<string>("");
// 路由
const router = useRouter();
// 下拉
const selectData = [
  {
    key: 0,
    title: "退出登录",
  },
  {
    key: 1,
    title: "修改密码",
  }
]

// DOM渲染完成
onMounted(async () => {
  try {
    const r = await info();
    const {data} = r.data.data;
    username.value = data.username;
    await setInfo(data);
  } catch (err) {
    await message.error(err as string)
  }
})

//退出点击
const authClick = () => {
  Cookies.remove("token");
  router.push("/");
}
</script>

<style scoped lang="less">
.header-box {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 6px 0;
  overflow: hidden;
  background: #1890ff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;

  > h1 {
    padding-left: 60px;
    color: #fff;
    flex: 1;
    font-size: 30px;
    margin: 0;
    font-weight: 900;
  }

  > div {
    cursor: pointer;
    flex: 1;
    color: #FFF;
    display: flex;
    align-items: center;
    justify-content: end;
    padding-right: 60px;
    font-size: 16px;

    > img {
      border-radius: 50%;
      width: 50px;
      height: auto;
      display: block;
      margin-right: 10px;
    }
  }
}
</style>